<template>
  <div  class="p16 flex-column-null-between container" style="width: 98%;">
    <div style="height: 50px">
      <div class="search-item">
        <el-input
            size="small"
            v-model="queryParams.loginUsername"
            class="input-width clear-input"
            suffix-icon="el-icon-search"
            clearable
            placeholder="请输入登录名"
        ></el-input>
      </div>

      <div class="search-item">
        <el-button type="primary" size="small"  @click="queryOnlineList">搜索</el-button>
      </div>
    </div>

    <div  style="height: calc(100vh - 180px)">
      <el-table
          :data="tableData"
          size="small"
          :row-style="{height:'0'}"
          height="calc(100vh - 220px)"
          v-loading="loading">
        <el-table-column
            v-for="(item,index) in fields"
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :min-width="item.width"
            :fixed="item.fixed"
        >
        </el-table-column>

      </el-table>
      <div class="page-container">
        <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="nowPage"
            :page-size="10"
            layout="sizes,total, prev, pager, next"
            :total="total">
        </el-pagination>
      </div>
    </div>


  </div>
</template>

<script>
import {onlineList} from '@/api/control';
export default {
  data() {
    return {
      total: 0,
      loading: false,
      nowPage:1,
      queryParams:{
        pageNum:1,
        pageSize:10,
        loginUsername:"",
      },
      fields:[
        {
          label:"用户账号",
          prop:"userAccount",
          width:150
        },{
          label:"用户名",
          prop:"username",
          width:150
        },{
          label:"登录时间",
          prop:"loginTime",
          width:150
        },{
          label:"在线小时数",
          prop:"onlineHour",
          width:150
        }
      ],
      tableData: []
    }
  },
  created() {
    this.queryOnlineList();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    async queryOnlineList(){
      this.loading = true;
      let ret = await onlineList(this.queryParams);
      let content = ret.data;
      this.total = content.total;
      this.tableData = content.list;
      this.loading = false;
    },
    handleSizeChange(val) {
      this.queryParams.limit = val;
      this.queryOnlineList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.queryOnlineList();
    }

  },

}
</script>


<style src="../../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}

</style>
